<!--
-->
<template>
    <vxe-modal v-model="visible" :height="layout.modalHeight(600)" :min-width="layout.modalMinWidth(600)" :position="{top: '60px'}" :title="title" :width="layout.modalWidth(800)" destroy-on-close resize show-footer show-maximize @close="cancelClick">
        <el-form ref="ELForm" v-loading="isLoading" :model="state.model" :rules="rules" :validate-on-rule-change="false" class="ELForm" inline label-width="120px">
            <!--            <el-form-item :style="layout.col2" label="项目" prop="projectId">-->
            <!--                <el-select v-model="state.model.projectId" style="width: 100%" @change="loadProgramList">-->
            <!--                    <el-option v-for="item in state.projectList" :key="item.id" :label="item.name" :value="item.id" />-->
            <!--                </el-select>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item :style="layout.col2" label="程序" prop="programId">-->
            <!--                <el-select v-model="state.model.programId" style="width: 100%">-->
            <!--                    <el-option v-for="item in state.programList" :key="item.id" :label="item.name" :value="item.id" />-->
            <!--                </el-select>-->
            <!--            </el-form-item>-->
            <el-form-item :style="layout.col2" label="设备名称" prop="name">
                <el-input v-model="state.model.name" />
            </el-form-item>
            <el-form-item v-if="state.model.code" :style="layout.col2" label="设备编号" prop="code">
                <el-input v-model="state.model.code" disabled />
            </el-form-item>
            <el-form-item :style="layout.col2" label="设备型号" prop="model">
                <g-dict-select v-model="state.model.model" code="XrfType" value-field="name" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="客户名称" prop="customer">
                <el-input v-model="state.model.customer" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="客户地址" prop="customerAddr">
                <el-input v-model="state.model.customerAddr" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="联系人" prop="contactName">
                <el-input v-model="state.model.contactName" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="联系电话" prop="contactPhone">
                <el-input v-model="state.model.contactPhone" />
            </el-form-item>
            <el-form-item :style="layout.col1" label="设备状态" prop="status">
                <el-radio-group v-model="state.model.status">
                    <el-radio :value="0">新购</el-radio>
                    <el-radio :value="1">售出</el-radio>
                    <el-radio :value="2">退回</el-radio>
                    <el-radio :value="3">报废</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :style="layout.col1" label="描述" prop="description">
                <el-input v-model="state.model.description" type="textarea" />
            </el-form-item>
            <!--            <el-form-item :style="layout.col2" label="Mac地址" prop="mac">-->
            <!--                <el-input v-model="state.model.mac" />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item :style="layout.col1" label="算法类型" prop="algorithmType">-->
            <!--                <el-radio-group v-model="state.model.algorithmType">-->
            <!--                    <el-radio :value="0">无算法</el-radio>-->
            <!--                    <el-radio :value="1">标准取样法</el-radio>-->
            <!--                    <el-radio :value="2">基本参数法</el-radio>-->
            <!--                    <el-radio :value="3">标准取样+基本参数</el-radio>-->
            <!--                </el-radio-group>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item :style="layout.col2" label="是否调试电脑" prop="isDebugPC">-->
            <!--                <el-radio-group v-model="state.model.isDebugPC">-->
            <!--                    <el-radio :value="false">否</el-radio>-->
            <!--                    <el-radio :value="true">是</el-radio>-->
            <!--                </el-radio-group>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item :style="layout.col2" label="软件类型" prop="debugOrRelease">-->
            <!--                <el-radio-group v-model="state.model.debugOrRelease">-->
            <!--                    <el-radio value="Release">正式版</el-radio>-->
            <!--                    <el-radio value="Debug">测试版</el-radio>-->
            <!--                </el-radio-group>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item :style="layout.col2" label="是否可用" prop="canUsed">-->
            <!--                <el-radio-group v-model="state.model.canUsed">-->
            <!--                    <el-radio :value="false">否</el-radio>-->
            <!--                    <el-radio :value="true">是</el-radio>-->
            <!--                </el-radio-group>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item :style="layout.col1" label="授权类型" prop="authorizationType">-->
            <!--                <el-radio-group v-model="state.model.authorizationType">-->
            <!--                    <el-radio :value="0">未授权</el-radio>-->
            <!--                    <el-radio :value="1">永久授权</el-radio>-->
            <!--                    <el-radio :value="2">天数授权</el-radio>-->
            <!--                    <el-radio :value="3">截止时间授权</el-radio>-->
            <!--                </el-radio-group>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item v-if="state.model.authorizationType === 2" :style="layout.col1" label="剩余天数" prop="remainingDays">-->
            <!--                <el-input-number v-model="state.model.remainingDays" controls-position="right" style="width: 100%;" />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item v-if="state.model.authorizationType === 3" :style="layout.col1" label="到期时间" prop="deadline">-->
            <!--                <el-date-picker v-model="state.model.deadline" format="YYYY-MM-DD" style="width: 100%;" value-format="YYYY-MM-DDT23:59:59" />-->
            <!--            </el-form-item>-->
        </el-form>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "./api.js";

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const Model = () => {
    return {
        id: null,
        name: null,
        code: null,
        model: null,
        customer: null,
        customerAddr: null,
        contactName: null,
        contactPhone: null,
        status: 0,
        description: null
    }
}

// 校验规则
const rules = computed(() => {
    return {
        name: [{required: true, message: "请设置设备编号"}],
        model: [{required: true, message: "请设置设备型号"}],
        customer: [{required: true, message: "请设置客户名称"}],
        contactPhone: [{required: true, message: "请设置客户联系方式"}],
    }
})

// 自定义校验规则
const customRules = {
    // pid: (rule, value, callback) => {
    //     if (state.model.type > 0) {
    //         if (!value) return callback(new Error("请设置客户名称"));
    //     }
    //     return true;
    // },
};

/**
 * 查程序
 * @param projectId
 * @returns {Promise<void>}
 */
async function loadProgramList(projectId) {
    state.programList = [];
    const {data} = await api.GetProgramList({projectId});
    state.programList = data || [];
}

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据
    // state.projectList = [];
    state.programList = [];
    // api.GetProjectList({}).then(({data}) => {
    //     state.projectList = data || []
    // })
    loadProgramList()
}

// 校验表单
function beforeSubmit() {
    ELForm.value.validate(isOk => {
        isOk && submit()
    })
}

// 提交表单
async function submit() {
    isSubmitting.value = true
    console.log("submit: ", state.model)
    const body = {...state.model}
    const {success, data} = await api[state.model.id ? 'UpdateDeviceInfo' : 'AddDeviceInfo'](body);
    isSubmitting.value = false
    if (!success) return 0;
    $message.success("操作成功")
    submitSuccess()
}

onMounted(() => {
})
defineExpose({
    show
})
</script>


<style lang="scss" scoped>
.EditForm {

}
</style>
